<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
       body {
        background: #eee;
        color: #444;
        font-family: "Helvetica", arial, sans-serif;
        }

        .container {
        background: #fff;
        max-width: 600px;
        width: 100%;
        display: table;
        margin: 0 auto;
        margin-top: 40px;
        border: 1px solid #cfcbcc;
        }

        input {
        border: none;
        display: block;
        width: 98.4%;
        line-height: 1.5;
        padding: 8px 0 8px 10px;
        border-bottom: 1px solid #cfcbcc;
        outline: 0;
        }

        h1,
        h2 {
        text-align: center;
        margin-bottom: 0px;
        line-height: 1;
        }

        h2 {
        color: gray;
        }

        ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }
        ul li {
        font-weight: 400;
        border-bottom: 1px solid #cfcbcc;
        line-height: 1.5;
        float:left;
        clear:left;
        width:600px;
        margin:0.2em 0;
        padding:0.5em 0.8em;
        list-style:none;
        background-color:#f2f2f2;
        border-left:5px solid #003842;
        cursor:pointer;
        color:#333;
        position:relative;
        z-index:2;

        transition-property: margin, background-color, border-color;
        transition-duration: .4s, .2s, .2s;
        transition-timing-function: ease-in-out, ease, ease;
        }
        
        ul li:before {
        content: "\25A1";
        padding: 10px 10px;
        font-size: 20px;
        }
        ul li:hover {
        text-decoration: line-through;
        cursor: pointer;
        background-color:#f9f9f9;
        border-color:#00BDE8;
        }
        ul li:last-child {
        border-bottom: none;
        }

        .checked {
        color: green;
        }
        .checked:before {
        content: "\2713";
        padding: 10px 10px;
        font-size: 20px;
        }
        .checked:hover {
        text-decoration: none;
        }
        .checked:hover:after {
        content: "(删除)";
        color: tomato;
        text-align: left;
        }
        #count{
            color: teal;
            margin: 0 10px;
        }
        
        #searchPlace{
            margin:auto;
            width: 400px;
            text-align: center;
            margin-top: 20px;
            color: teal;
        }
        input{
            width: 200px;
            display: inline-block;

        }
        .hiding {
        margin-left:-100%;
        opacity:0.5;
        }

        .hidden {
        display:none;
        }

        /*clock*/

        .clock {
            width: 10rem;
            height: 10rem;
            border: 20px solid teal;
            border-radius: 50%;
            margin: 50px auto;
            position: relative;
            padding: 2rem;
            box-shadow: 0 0 0 4px rgba(0,0,0,0.1);
            background-color: turquoise;
        }

        .clock-face{
            position: relative;
            width: 100%;
            height: 100%;
            transform: translateY(-3px);
        }

        .hand {
            width: 50%;
            height: 6px;
            background: black;
            position: absolute;
            top: 50%;
            transform-origin: 100%;
            transform: rotate(90deg);
            transition: all 0.05s;
            transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
        }

    </style>
</head>
<body>
    <h1>代办事项</h1>
    <h2>目前有<span id="count"></span>项未完成</h2>
    <div id="searchPlace">
        <label for="search">搜索事件</label>
        <input type="text" id="search">
    </div>
    <div class="container">
        <form  action="#" style="margin-top: 5px;">
            <input type="text" name="item" id="item" placeholder="输入新的事项" />
            <button type="submit" style="height: 36.5px;">添加</button>
         </form>  
        <ul id="list"></ul>
    </div>
    <!--clock-->

    <div class="clock">
        <div class="clock-face">
          <div class="hand hour-hand"></div>
          <div class="hand min-hand"></div>
          <div class="hand second-hand"></div> 
        </div>  
      </div>

    <script>
        (function(){
    
            var list = document.querySelector('#list'),
                form = document.querySelector('form'),
                item = document.querySelector('#item');
                count=0;
            //增加
            form.addEventListener('submit',function(e){
                e.preventDefault();
                list.innerHTML += '<li>' + item.value + '</li>';
                store();
                item.value = "";
                count++;
                document.getElementById("count").innerText=4+count;
        
            },false)
            
            list.addEventListener('click',function(e){
                var t = e.target;
                if(t.classList.contains('checked')){
                t.parentNode.removeChild(t);
                count--;
                document.getElementById("count").innerText=4+count;
                } else {
                t.classList.add('checked');
                }
                store();
            },false)
            
            function store() {
                window.localStorage.myitems = list.innerHTML;//本地储存对象
                window.localStorage.count = document.getElementById("count").innerText;
            }
            
            function getValues() {
                var storedValues = window.localStorage.myitems;
                if(!storedValues) {
                    list.innerHTML = '<li>吃饭</li>'+
                                    '<li>睡觉</li>'+
                                    '<li>跑步</li>'+
                                    '<li>打豆豆</li>';
                    document.getElementById("count").innerText=4;            
                }
                else {
                list.innerHTML = storedValues;
                document.getElementById("count").innerText=window.localStorage.count;
                };
            }
            getValues();


            //搜索功能
            $("#search").keyup(function (){
                var searchText = $("#search").val();
                if(searchText != "" && searchText != null){
                    searchText.toLowerCase();//大小写
                    $("#list li").each(function(){
                        var listText=$(this).text().toLowerCase();
                        if(listText.indexOf(searchText)>-1){
                            $(this).removeClass('hidden out').addClass('in');
                            setTimeout(function() {
                                $('.in').removeClass('hiding');
                            }, 1);
                        }
                        else{
                            $(this).addClass('hiding out').removeClass('in');
                            setTimeout(function() {
                                $('.out').addClass('hidden');
                             }, 300);
                        }

                    })

                }
                else{
                        $("#list li").each(function(){
                            $(this).removeClass('hidden out').addClass('in');
                            setTimeout(function() {
                                $('.in').removeClass('hiding');
                            }, 1);

                        });
                    };
            }) ;

        //时钟功能
        const secondHand = document.querySelector('.second-hand');
        const minsHand = document.querySelector('.min-hand');
        const hourHand = document.querySelector('.hour-hand');

        function setDate() {
            const now = new Date();

            const seconds = now.getSeconds();
            const secondsDegrees = ((seconds / 60) * 360) + 90;
            secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

            const mins = now.getMinutes();
            const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
            minsHand.style.transform = `rotate(${minsDegrees}deg)`;

            const hour = now.getHours();
            const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
            hourHand.style.transform = `rotate(${hourDegrees}deg)`;
        }

        setInterval(setDate, 1000);//每1000毫秒动一次

        setDate();
        })();
    </script>
</body>
</html>
